<template>
  <div class="home">
    <el-container class="el-container ">
      <!-- 左边栏 ：NavMenu导航菜单插件 -->
     <el-aside width="auto">
      <div class="logo"></div>
      <!-- unique-opened:保持一个子菜单的展开 -->
       <el-menu
      class="el-menu-admin"
      background-color="#F9F9F9"
      router
      unique-opened
      :collapse="isCollapse"
      @open="handleOpen"
      @close="handleClose">
        <!-- 管理列表 -->
        <el-submenu :index="item.path" v-for="item in menusArr" :key="item.id">
          <template slot="title">
            <i class="el-icon-location"></i>
            <span>{{item.authName}}</span>
          </template>
          <el-menu-item :index="child.path" v-for="child in item.children" :key="child.id">
            <i  class="el-icon-menu" ></i>
            <span slot="title">{{child.authName}}</span>
          </el-menu-item>
        </el-submenu>
      </el-menu>

     </el-aside>

     <el-container>
       <!-- 右边头部 -->
       <el-header class="el-header">
         <i class="myicon myicon-menu toggle-btn " @click="toggleShow"></i>
         <span class="system-title">电商后台管理系统</span>
         <div>
           <span class="welcome">您好,{{username}}</span>
           <el-button type="success" round @click="loginOut">退出</el-button>
         </div>
       </el-header>

       <!-- 右边主体内容 -->
       <el-main>
         <router-view></router-view>
       </el-main>
     </el-container>
    </el-container>
  </div>
</template>

<script>
// 引入获取左侧权限管理分类列表的封装请求函数
import { getMenus } from '@/api/handleUrl'

export default {
  data () {
    return {
      // 控制菜单的折叠与展开
      isCollapse: false,
      // 获取本地存储的登录用户名
      username: '',
      // 存储页面左侧权限管理的列表数据
      menusArr: []
    }
  },
  created () {
    getMenus().then(res => {
      this.menusArr = res.data
    })
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    },
    // 切换菜单的折叠与展开
    toggleShow () {
      this.isCollapse = !this.isCollapse
    },
    // 退出登录
    loginOut () {
      // 清除缓存
      localStorage.clear()
      // 跳转到登录页面
      this.$router.push({ name: 'login' })
    }
  },
  mounted () {
    // 获取本地存储的登录用户名
    this.username = localStorage.getItem('username')
  }
}
</script>

<style lang="scss" scoped>
  .home {
    height: 100%;
    .el-menu-admin:not(.el-menu--collapse) {
      width: 200px;
      min-height: 400px;
    }
    .el-container {
      height: 100%;
    }
    .el-aside {
      background-color: #F9F9F9;
    }
    .el-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #409EFF;
    }
    .logo {
      height:60px;
      background: url(../assets/logo.png);
      background-size: cover;
      background-color: white;
    }
    .toggle-btn {
      padding: 0 15px;
      margin-left: -20px;
      font-size: 36px;
      color: white;
      cursor: pointer;
      line-height: 60px;
      &:hover {
        background-color: #4292CF;
      }
    }
    .system-title {
      font-size: 28px;
      color: white;
    }
    .welcome, {
      color: white;
    }
  }
</style>
